<template>
<div>
    <Phead />

  <div class="langgreen">
        <h6><i></i>&nbsp;&nbsp; 招标进行中 &nbsp;&nbsp;<i></i></h6>
        <p>温馨提示：请您在招标结束前发起报价，谢谢！</p>
    </div>
    <div class="w inthebidding stamp">
        <div class="clearfix">
            <div class="box-1 box">
                <h4>项目信息</h4>
                <table>
                    <tbody>
                        <tr>
                            <td>项目名称：{{bid_data.bid_name}}</td>
                            <td>项目编号：{{bid_data.bid_sn}}</td>
                        </tr>
                        <tr>
                            <td>收货地址：{{bid_data.area}}</td>
                            <td>收货时间：{{bid_data.bid_arrival_time}}</td>
                        </tr>
                        <tr>
                            <td>预算：{{bid_data.bid_budget}}</td>
                            <td>最低降幅：千分之四</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="box-2 box">
                <h5>距离招标开始还有</h5>
                <div class="time">
                    <i id="h">{{h}}</i>
                    <em>时</em>
                    <i id="m">{{m}}</i>
                    <em>分</em>
                    <i id="s">{{s}}</i>
                    <em>秒</em>
                </div>
                <button class="yibaoming" v-if="bid_data.isEnroll == 1">已报名</button>
                <button v-else @click="enrollBid">报名</button>
            </div>
        </div>
        <div class="box box-3">
            <h4>招标信息</h4>
            <table>
                <tbody>
                    <tr>
                        <td>招标开始时间：{{bid_data.bid_start_time}}</td>
                        <td>付款方式：{{bid_data.bid_pay_type}}</td>
                    </tr>
                    <tr>
                        <td>参与规则：{{guize}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="box box-4">
            <i>备注信息</i>
            <p>
               {{bid_data.bid_remark}}
            </p>
        </div>
        <div class="box box-5">
            <h4>招标产品</h4>
            <table>
                <tbody>
                    <tr v-for="(item,index) in bid_data.goods">

                      <td>{{item.goods_name}}</td>
                      <td>{{item.goods_num}}</td>
                      <td>{{item.goods_price}}元</td>
                      <td @click="showGoods(index)" >
                        <button>产品详情</button>
                      </td> 
                    </tr>
                    
                </tbody>
            </table>
        </div>
        <div class="box box-6">
                <router-link to="/bid/pushbid">
                  <button>我要招标</button>
                </router-link>
        </div>
       
    </div>
    <!-- 产品详情弹窗 -->
    <div class="dialog">
        <div class="black"  v-if="isProMaskShow">
            <div class="dialog-cover back"  @click="isProMaskShow =false"></div>          
            <div class="hint3">
                <h2>{{goods_detail.goods_name}}</h2>
                <p>品牌/型号：{{goods_detail.goods_brand_model}}</p>
                <p>单位：{{goods_detail.goods_unit}}</p>
                <p>数量：{{goods_detail.goods_num}}</p>
                <p>单价：￥{{goods_detail.goods_price}}</p>
                <p>产品说明：{{goods_detail.goods_remark}}</p>
                <div class="close" @click="isProMaskShow = false">关闭</div>
            </div>
        </div>
    </div>

    <Pfoot />

    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog" >
         <div slot="main">{{dailogText}}</div>
     </Pdailog>

  </div>
  

</template>
<script>
  import Phead from '@/components/Phead.vue'
  import Pfoot from '@/components/Pfoot.vue'

import Pdailog from '@/components/Pdailog.vue'

export default {
  data(){
    return{
        headBg: false,  //左上角 “< 投标” 使用数据  当页面向下滚动  该值变为 true

        bid_data:{},
        h: '00', //时
        m: '00', //分
        s: '00', //秒
        guize: '本次报价共3轮，每轮允许报价1次，每轮报价10分钟',


        goods_detail:{
          goods_name:'',
          goods_brand_model:'',//品牌型号
          goods_unit:'',
          goods_price:'',
          goods_num:'',
          goods_remark:''
        },
        isProMaskShow: false, // 是否显示弹框
        downTime:'',
          
        dailogShow:false,
        dailogText:'报名成功',
     }
  },
  async created(){
    let user_token =this.getUserToken();
    let bidId =  this.$route.query.bid_id
    let re = await this.$axios.post('bid/getBidDetail',{
        bid_id:bidId,
        user_token:user_token
    })
    if(re.code == 200){
        let toWhere = '/bid/'+re.data.toWhere;
        //如果不是当前页面跳转
        if(toWhere != this.$route.path){
            this.$router.push({path:'/'+toWhere+'?bid_id='+bidId})
            
        }else{
            
              this.bid_data = re.data
              
              this.setCountDown();

        }    


     }

  },
  components: {
    Phead,
    Pfoot,
    Pdailog
  },

  mounted(){
            
  },
  methods:{
    //报名
   async enrollBid(){  
        let bidId = this.bid_data.bid_id
        //tab 20 招标中 70已完成，100 已收藏
        let re = await this.$axios.post('bid/enrollBid',{
            bid_id:bidId,
        });
         if(re.code == 200){
                this.dailogShow = true,
                this.dailogText = '报名成功'
              //改变报名按钮
              this.bid_data.isEnroll = 1;
            //未认证
            }else if(re.code == 201){
              this.$router.push({path:'/register/status'})
            }else{
                this.dailogShow = true,
                this.dailogText = re.msg
            }
    },
    //显示商品
     showGoods(index){
      let goods = this.bid_data.goods[index];
      console.log(index)
      this.isProMaskShow = true
      this.goods_detail.goods_name = goods.goods_name
      this.goods_detail.goods_brand_model = goods.goods_brand_model

      this.goods_detail.goods_unit = goods.goods_unit
      this.goods_detail.goods_num = goods.goods_num
      this.goods_detail.goods_price = goods.goods_price
      this.goods_detail.goods_remark = goods.goods_remark

    },
     //倒计时
       setCountDown(){
        let that = this;
        let time = 1000;
        let bid_data = this.bid_data
          this.downTime = setInterval(function(){
              if (bid_data.time1 < 0) {
                  bid_data.time1 = 0
                      //如果报名，跳转
                      if(bid_data.isEnroll == 1){
                           that.$router.push({path:'/bid/onedetail/onedetail',query: {
                            bid_id:bid_data.bid_id
                          }})
                      }
               }else{
                    let formatTime = that.getFormat(bid_data.time1);
                    bid_data.time1 -= time
                    that.bid_data = bid_data
                    that.h = formatTime.hh
                    that.m = formatTime.mm
                    that.s = formatTime.ss
              }
           }, time)

      },
      reback(){
        if(this.$route.query.redirect){
              if(this.$route.query.bidtype){
                this.$router.replace({path:this.$route.query.redirect,query:{
                  bidtype:this.$route.query.bidtype
                }});
              }else{
                this.$router.replace({path:this.$route.query.redirect})
              }
        }else{
             this.$router.replace({path:'/'})
        }
     },

     //关闭弹窗
     closeDialog(){
          this.dailogShow=false;
     },
     


  },

  beforeRouteLeave(to,from,next){
    clearInterval(this.downTime);
    next()
  },
   

}
</script>